<template>
    <div>
        <div class="nav"></div>
        
        <div class="side">
            <el-menu :default-active="idx" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="selected">

                <el-submenu index="1"> 
                    <template slot="title"><i class="el-icon-message"></i>业务</template>
                    <el-menu-item-group>
                        <el-menu-item index="addItem">业务登记</el-menu-item>
                        <el-menu-item index="listItems">业务查询与修改</el-menu-item>
                        <el-menu-item index="business">业务类型配置</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            
                <el-menu-item index="project"><i class="el-icon-menu"></i>项目管理</el-menu-item>
                <el-menu-item index="department"><i class="el-icon-menu"></i>部门院系管理</el-menu-item>
                <el-menu-item index="account"><i class="el-icon-menu"></i>帐号管理</el-menu-item>
                <el-menu-item index="password"><i class="el-icon-setting"></i>修改密码</el-menu-item>
                <el-menu-item index="backup"><i class="el-icon-setting"></i>备份数据库</el-menu-item>
                <el-menu-item index="class"><i class="el-icon-setting"></i>课表</el-menu-item>
            </el-menu>
        </div>

        <div class="main">
            <slot></slot>
        </div>
        
       
    </div>
</template>
<script>
    export default{
        data () {
            return {
                idx: 'project',
                idxed: ''
            };
        },
        methods: {
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          },
          selected(index,indexPath) {
            this.idxed = index;
            console.log(this.idxed);
            this.$router.push(index);
          }
        }
        
    }
</script>
<style scoped>
.nav{
    background: #000;
    height: 50px;
    left: 0;
    position: fixed;;
    top: 0;
    width: 100%;
}
.side{
    background: #D3DCE6;
    bottom: 0;
    left: 0;
    position: fixed;
    float: left;
    top: 50px;
    width: 18%;

}
.main{
    position: absolute;
    top: 80px;
    left: 20%;
    right: 20px;
}
</style>
